<template>
  <div class="app-container">
    <div class="filter-container">
      姓名:
      <el-input v-model="listQuery.username" label="姓名" placeholder="姓名" style="width: 200px;" class="filter-item mring10" @keyup.enter.native="handleFilter" suffix-icon="el-icon-search" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter" size="small"> 搜索</el-button>
    </div>

    <el-table
      :key="tableKey" v-loading="listLoading" :data="list"  fit  stripe  highlight-current-row style="width: 100%;margin-top: 1.125rem" row-key="id" >
      <!-- <el-table-column label="编号" prop="id" min-width="80"></el-table-column> -->
      <el-table-column label="用户信息" prop="name" min-width="320">
        <template slot-scope="{row}">
          <img  v-if="row.image" :src="row.image" class="avatar" style="float:left;margin-right:5px;max-width: 80px;max-height: 80px;padding: 1px;border:1px solid #ccc;">
          {{ row.username}}
        </template>
      </el-table-column>
      <el-table-column label="性别" prop="sex"  min-width="120">
        <template slot-scope="{row}">
           {{ row.sex == 1 ?"男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" prop="tel"  min-width="120"></el-table-column>
      <el-table-column label="等级" prop="level"  min-width="120"></el-table-column>
      <el-table-column label="创建时间" prop="create_time" min-width="150" align="center">
        <template slot-scope="{row}">
           {{ row.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
           <el-button type="primary" @click="handleUpdate(row)" size="small">编 辑</el-button>
           <el-button type="danger" @click="handleDelete(row,$index)" size="small">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination hide-on-single-page v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />

  </div>
</template>

<script>
  import waves from '@/directive/waves' // waves directive
  import  {parseTime}  from '@/utils'
  import Pagination from '@/components/Pagination'
  import { fetchList } from '@/api/member/index'

  export default {
    name: 'goods',
    components: { Pagination },
    directives: { waves },
    data() {
      return {
        tableKey:'',
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
         size:10,
         page:1,
         name:null,
       },
      }
    },
  created() {
    this.getList()
  },
    methods: {
      getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },
      handleCreate() {
       
      },
      handleUpdate(row){
        this.$alert("功能开发中,敬请期待！")
        //this.$router.push({name:'createGoods','params':{id:row.id}})
      },
      handleDelete(row, index){
        this.$alert("功能开发中,敬请期待！")
      }
    },
}
</script>

<style>
table td{font-size: 12px;color: #8c8c8c;}
.filter-item input[type='text'] {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
}

.mring10 {
  margin-right: 10px;
}
</style>
